<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里的html文件主要学习布局，不用经过control，直接访问</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>欢迎来到阿里爸妈公司</h1>
<div class="card-group">
    <!--group应该给它提供了一个框架-->
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This card has even longer content than the first to show that equal height action。</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
</div>


<script src="../jquery-3.3.1.min.js"></script>

<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>